<!DOCTYPE html>
<html rem="1920">
	<style type="text/css">
		html,body{
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}
		[rem="1920"] {
		  font-size: 5.2083333333vw;
		}
		[rem="750"] {
		  font-size: 13.333333333vw;
		}
		[rem="1024"] {
		  font-size: 9.7656255555vw;
		}
		[rem="2465"] {
		  font-size: 2.3073022333vw;
		}
		.progressive {
		  position: relative;
		  display: block;
		  overflow: hidden;
		}
		.progressive img {
		  display: block;
		  width: 100%;
		  height: 100%;
		  border: 0 none;
		}
		.progressive img.preview {
		  filter: blur(2vw);
		  transform: scale(1.05);
		}
		.progressive img.hide {
		  opacity: 0;
		}
		.progressive img.origin {
		  position: absolute;
		  left: 0;
		  top: 0;
		  animation: origin 1.5s ease-out;
		}
		.progressive img.origin-scale {
		  position: absolute;
		  left: 0;
		  top: 0;
		  animation: origin-scale 1s ease-out;
		}
		@-moz-keyframes origin {
		  0% {
		    opacity: 0;
		  }
		  100% {
		    opacity: 1;
		  }
		}
		@-webkit-keyframes origin {
		  0% {
		    opacity: 0;
		  }
		  100% {
		    opacity: 1;
		  }
		}
		@-o-keyframes origin {
		  0% {
		    opacity: 0;
		  }
		  100% {
		    opacity: 1;
		  }
		}
		@keyframes origin {
		  0% {
		    opacity: 0;
		  }
		  100% {
		    opacity: 1;
		  }
		}
		@-moz-keyframes origin-scale {
		  0% {
		    opacity: 0;
		    transform: scale(1.1);
		  }
		  100% {
		    opacity: 1;
		    transform: scale(1);
		  }
		}
		@-webkit-keyframes origin-scale {
		  0% {
		    opacity: 0;
		    transform: scale(1.1);
		  }
		  100% {
		    opacity: 1;
		    transform: scale(1);
		  }
		}
		@-o-keyframes origin-scale {
		  0% {
		    opacity: 0;
		    transform: scale(1.1);
		  }
		  100% {
		    opacity: 1;
		    transform: scale(1);
		  }
		}
		@keyframes origin-scale {
		  0% {
		    opacity: 0;
		    transform: scale(1.1);
		  }
		  100% {
		    opacity: 1;
		    transform: scale(1);
		  }
		}
	</style>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
	<!-- <link href="//unpkg.com/progressive-image/dist/index.css" rel="stylesheet" type="text/css"> -->
	<!-- <link rel="stylesheet" href="../src/assets/style/progressive.css" type="text/css"> -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
        let currHtml=document.querySelector("html")
        function setWebRem () {
            let html = document.documentElement;
            let wW = html.clientWidth;// 窗口宽度
            if(wW>=600){
                currHtml.setAttribute("rem",1920)
            }
        }
        setWebRem()
        // 改变窗口大小时重新设置 rem
        window.onresize = function () {
            setWebRem()
        }
    </script>

  </body>

</html>
